<template>
	<view>
		<view class="cu-modal version" :class="visible?'show':'no-show'">
			<view class="cu-dialog upgrade" :style="{'background': 'url('+cardBg+') center 0 / 100% 100% no-repeat'}">
				<image class="biaoti" src="/static/images/biaoti.png" mode=""></image>
				<view class="des">
					<pre>{{content}}</pre>
				</view>
				<u-toast ref="uToast"></u-toast>
				<view class="bg-white padding-lr padding-top" style="border-radius:0 0 20rpx 20rpx;padding-bottom:1px;">
					<view class="updatebtn" :class="progress==500?'updatebtn_fail':''" @tap="doUpData">
						{{progress===500?'下载失败，请重试':(downLoadng || progress!==0)?('正在下载...'+progress+'%'):'更新APP'}}
					</view>
					<view v-if="forceable=='0'" class="dialog_close" @tap="close">×</view>
					<view v-if="forceable!='0'" class="dialog_height"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "xunUpgrade",
		props: {
			// 新版本号1.0.1
			nextVersion: {
				type: String,
				default: '',
				required: true
			},
			// 更新内容
			content: {
				type: String,
				default: '',
				required: true
			},
			// 安卓更新地址
			androidUrl: {
				type: String,
				default: '',
				required: true
			},
			iosUrl: {
				type: String,
				default: '',
				required: true
			},
			// 是否强制更新
			forceable: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				visible: false,
				// 当progress设置为500 表示下载失败
				progress: 0,
				downLoadng:false,
				cardBg: '/static/images/gengxin.png'
			}
		},
		watch: {
			nextVersion() {
				
				var _this = this
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					// _this.$store.state.version = inf.version
					// _this.$store.state.newVersion = _this.nextVersion
					console.log('检查版本');
					var prevVersion = inf.version.replace(/\./g, '')
					var nextVersion = _this.nextVersion.replace(/\./g, '')
					console.log(prevVersion, nextVersion);
					if (Number(prevVersion) < Number(nextVersion)) {
						_this.visible = true
						_this.$store.state.hasNewVersion = true
					}
				})
			}
		},
		mounted() {


		},
		methods: {

			doUpData() {
				if(this.downLoadng) return
				this.downLoadng = true
				if (this.progress && this.progress != 500) {
					return
				}
				// 整包
				var loadflag = false
				var _this = this
				var osname = plus.os.name
				if (osname == 'Android') {
					// 安卓打开网页下载
					//plus.runtime.openURL(this.downloadUrl_android);
					var downloadTask = uni.downloadFile({ //执行下载
						url: _this.androidUrl, //下载地址
						success: downloadResult => { //下载成功
						_this.downLoadng = false
							_this.visible = false
							if (downloadResult.statusCode == 200) {
								plus.runtime.install( //安装
									downloadResult.tempFilePath, {
										force: true
									},
									function(res) {
										// _this.$refs.uToast.show({
										// 	message: '更新成功，重启中'
										// })
										plus.runtime.restart();
									},
									function(res) {
										_this.$refs.uToast.show({
											message: '更新失败'
										})
										plus.runtime.restart();
									}
								)
								// uni.showModal({
								// 	title: '提示',
								// 	content: '更新成功，确定现在重启吗？',
								// 	confirmText: '重启',
								// 	cancelText: '取消',
								// 	showCancel:false,
								// 	confirmColor: '#409EFF',
								// 	success: function(res) {
								// 		console.log(res);
								// 		if (res.confirm == true) {
								// 			plus.runtime.install( //安装
								// 				downloadResult.tempFilePath, {
								// 					force: true
								// 				},
								// 				function(res) {
								// 					console.log(res);
								// 					// uni.showToast({
								// 					// 	icon: 'none',
								// 					// 	title: '更新成功，重启中'
								// 					// });
								// 					plus.runtime.restart();
								// 				},
								// 				function(res) {
								// 					console.log(res);
								// 					uni.showToast({
								// 						icon: 'none',
								// 						title: '更新失败'
								// 					});
								// 					plus.runtime.restart();
								// 				}
								// 			)
								// 		}
								// 	},
								// 	fail: function(error) {
								// 		console.log(error);

								// 	}
								// })
							}
						},
						fail() {
							this.downLoadng = false
							this.progress = 500
						},
						complete() {
							uni.hideLoading()
						}
					})
					// setTimeout(() => {
					// 	if (!loadflag) {
					// 		this.progress = 500
					// 	}
					// }, 10000)
					downloadTask.onProgressUpdate(res => {
						loadflag = true
						if (res && res.progress) {
							if(Number(res.progress)>Number(this.progress)){
								this.progress = res.progress
							}
						}
					})
				} else {
					plus.runtime.launchApplication({
						action: _this.iosUrl
					}, function(e) {
						console.log('Open system default browser failed: ' + JSON.stringify(e));
					})
				}
			},
			close() {
				// uni.showTabBar()
				
				this.$emit('close')
				this.visible = false
				uni.removeStorageSync('newV')
			}
		}
	}
</script>

<style scoped lang="scss">
	.no-show {
		display: none;
	}

	.show {
		display: block;
	}

	.cu-modal {
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000rpx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		pre{
			line-height: 1.5;
		}
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.biaoti {
		position: absolute;
		width: 175rpx;
		height: 38rpx;
		top: 43rpx;
		left: 27rpx;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680rpx;
		max-width: 100%;
		/* background-color: #f8f8f8; */
		border-radius: 10rpx;
		/* overflow: hidden; */
	}

	.cu-modal .cu-dialog>.cu-bar:first-child .action {
		min-width: 100rpx;
		margin-right: 0;
		min-height: 100rpx;
	}

	.upgrade {
		position: relative;
		// #ifdef APP-PLUS
		min-height: 477rpx;
		// #endif
		// #ifdef H5
		min-height: 477rpx;
		// #endif
		/* overflow: visible; */
		width: 550rpx;
		padding-top: 380rpx;
		/* background: url(./upgrade.png) center 0 / 550rpx 504rpx no-repeat; */
	}

	

	.version {
		font-size: 0;
		z-index: 99999;
	}

	.version .padding {
		font-size: 28rpx;
	}

	.version .des {
		text-align: left;
		padding: 40rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #0B0A12;
		font-family: DINPro-Bold;
	}

	.updatebtn {
		width: 490rpx;
		background: #0B0A12;
		color: #fff;
		line-height: 80rpx;
		height: 80rpx;
		text-align: center;
		border-radius: 16rpx;
		font-size: 28rpx;
		margin: 0 auto 20rpx;
	}

	.updatebtn_fail {
		background: #EE1600;
	}

	.dialog_close {
		margin-bottom: 20rpx;
		color: #000;
		font-size: 48rpx;
	}

	.dialog_height {
		height: 80rpx;
	}

	.bg-white {
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* background-color: #fff; */
	}

	.padding-lr {
		padding: 0 30rpx;
	}

	.padding-top {
		padding-top: 30rpx;
	}
</style>